.detail {
  min-width: 100vw;
  min-height: 100vh;
  .goBack {
    height: 64px;
    line-height: 64px;
    text-indent: 20px;
  }
  .info {
    width: 100vw;
    height: 360px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    .storeImage {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #f8f8f8;
      &.gray {
        filter: grayscale(100%);
      }
    }
    .topInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100vw;
      height: 200px;
      padding: 0 30px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -30px;
      margin: 0 auto;
      box-sizing: border-box;
      .header {
        width: 200px;
        height: 200px;
        background: #f2f3f5;
        border-radius: 15px;
        border: 2px solid #f4f4f4;
        &.gray {
          filter: grayscale(100%);
        }
      }
      .text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-self: flex-start;
        height: 170px;
        margin-left: 30px;
        .name,
        .desc {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          word-break: break-all;
          overflow: hidden;
        }
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 60px;
          .name {
            flex: 1;
            -webkit-line-clamp: 1;
            font-size: 32px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            margin-right: 10px;
          }
          .collect {
            align-self: flex-start;
            width: 40px;
            height: 40px;
          }
        }
        .desc {
          height: 70px;
          -webkit-line-clamp: 2;
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #ffffff;
          margin: 10px 0;
        }
      }
    }
  }
  .activity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    padding: 420px 40px 0 40px;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    .first,
    .cut,
    .present {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2px 6px;
      font-size: 20px;
      margin-right: 20px;
    }
    .first {
      color: #ffffff;
      background: orange;
    }
    .cut {
      color: #ffffff;
      background: red;
    }
    .present {
      background: hotpink;
    }
    .label {
      display: flex;
      align-items: center;
    }
    .more {
      color: #999999;
    }
  }
  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    border-bottom: 1px solid #f2f3f5;
    .tab,
    .active {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 100%;
      color: #000;
    }
    .active {
      position: relative;
      color: orange;
      &::after {
        content: '';
        width: 120px;
        height: 4px;
        background: orange;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
    .lightImg {
      width: 75px;
      height: 30px;
      position: absolute;
      right: 5px;
      pointer-events: none;
    }
  }

  .swipeTabContainer {
    width: 100%;
    height: calc(100vh - 550px - env(safe-area-inset-bottom));
    .menuList {
      display: flex;
      justify-content: space-between;
      .menuTab {
        width: 120px;
        height: calc(100vh - 742px - env(safe-area-inset-bottom));
        padding: 20px 10px;
        position: sticky;
        top: 0;
        overflow-y: scroll;
        .tabItem {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
          overflow: hidden;
          margin-bottom: 30px;
          font-size: 25px;
        }
        .active {
          font-weight: 500;
          color: orange;
        }
      }
      .menuCards {
        flex: 1;
        width: 100%;
        height: calc(100vh - 630px - env(safe-area-inset-bottom));
        position: sticky;
        top: 88px;
        .menuScrollViewContainer {
          height: calc(100vh - 630px - env(safe-area-inset-bottom));
          .cardTitle {
            position: sticky;
            top: 0;
            // top: 88px;
            z-index: 10;
            background: #eeeeee;
            padding: 10px 20px;
            font-size: 28px;
            font-weight: 600;
            font-family: PingFangSC-Regular, PingFang SC;
          }

          .card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 15px;
            padding: 20px 0;
            border-bottom: 2px solid #f2f3f5;
            position: relative;
            .imgBox {
              width: 150px;
              height: 150px;
              border-radius: 8px;
              background: #f2f3f5;
              .img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            .cardInfo {
              flex: 1;
              display: flex;
              justify-content: space-between;
              flex-direction: column;
              height: 150px;
              padding-left: 20px;
              box-sizing: border-box;
              .title {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                word-break: break-all;
                overflow: hidden;
                font-size: 28px;
                font-weight: 500;
              }
              .desc {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;
                overflow: hidden;
                color: #999999;
                font-size: 20px;
                font-family: PingFangSC-Regular, PingFang SC;
              }
              .bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .price {
                  color: #d32d25;
                }
                .listItemOperate {
                  display: flex;
                  align-items: center;
                  .count {
                    width: 90rpx;
                    text-align: center;
                  }
                  .jian {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 50px;
                    height: 50px;
                    line-height: 38px;
                    color: orange;
                    border-radius: 50%;
                    background-color: #fff;
                    font-size: 40px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    border: 2px solid orange;
                    box-sizing: border-box;
                  }
                  .add {
                    display: flex;
                    justify-content: center;
                    width: 50px;
                    height: 50px;
                    line-height: 40px;
                    color: #ffffff;
                    border-radius: 50%;
                    background-color: orange;
                    font-size: 50px;
                    font-family: PingFangSC-Regular, PingFang SC;
                  }
                }
                .select {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 120px;
                  height: 50px;
                  color: #ffffff;
                  border-radius: 25px;
                  background-color: orange;
                  font-size: 24px;
                  font-family: PingFangSC-Regular, PingFang SC;
                }
              }
            }
          }
          .card.noBorder {
            border: none;
          }
        }
      }
    }

    .commentContainer {
      height: 100%;
      overflow-y: scroll;
    }
  }

  .shoppingCard {
    display: none;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80px;
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;
    z-index: 99;
    background: #333333;
    padding-left: 200px;
    box-sizing: border-box;

    .cardImg {
      width: 148px;
      height: 116px;
      position: absolute;
      left: 25px;
      bottom: 0;
      @keyframes aCartScale{
        0%{
          -webkit-transform: scale(1.1);
        }
        100% {
          -webkit-transform: scale(1);
        }
      }
      &.cartShark{
        animation: aCartScale 200ms cubic-bezier(.17,.67,.83,.67);
        animation-fill-mode: backwards;
      }
      .img {
        width: 100%;
        height: 100%;
      }
      .flag {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: -10px;
        top: -5px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: red;
        color: #ffffff;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
      }
    }
    .text {
      color: #999999;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
    }
    .settlement {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 100%;
      background: #555555;
      color: #bbbbbb;
      font-size: 30px;
      font-family: PingFangSC-Medium, PingFang SC;
    }
    .active {
      background: orange;
      color: #ffffff;
    }
  }
  // 商品大图详情
  .bigShopImg {
    padding: 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 98;
    background: #ffffff;
    .close {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 80px;
      position: absolute;
      left: 10px;
      top: 80px;
      font-size: 60px;
      font-weight: 300;
    }
    .imgs {
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      font-size: 0;
      .img {
        width: 100%;
      }
    }
    .title {
      color: #333333;
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      margin-top: 28px;
      font-weight: normal;
    }
    .action {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      border-bottom: 1px solid #cccccc;
      margin-top: 20px;
      .price {
        color: #d32d25;
      }
      .select {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 50px;
        color: #ffffff;
        border-radius: 25px;
        background-color: orange;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
      }
      .listItemOperate {
        display: flex;
        align-items: center;
        .add {
          display: flex;
          justify-content: center;
          width: 50px;
          height: 50px;
          line-height: 40px;
          color: #ffffff;
          border-radius: 50%;
          background-color: orange;
          font-size: 50px;
          font-family: PingFangSC-Regular, PingFang SC;
        }
      }
    }
    .descTitle {
      color: #000000;
      font-size: 28px;
      font-family: PingFangSC-Medium, PingFang SC;
      margin-top: 30px;
    }
    .descText {
      color: #999999;
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      margin-top: 20px;
      text-align: justify;
    }
  }

  .activityList {
    .coupon:first-child {
      margin-top: 30px;
    }
    .coupon:last-child {
      margin-bottom: 60px;
    }
    .coupon {
      display: flex;
      align-items: flex-start;
      font-size: 24px;
      margin-bottom: 20px;
      .first,
      .cut,
      .present {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2px 6px;
        color: #ffffff;
        font-size: 20px;
        margin-right: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
      }
      .first {
        background: orange;
      }
      .cut {
        background: red;
      }
      .present {
        background: hotpink;
      }
    }
  }

  .shopInfoList {
    .shopInfoItem {
      font-size: 28px;
      padding: 24px 24px;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        border-bottom: 1px solid #d6e4ef;
      }
      .baseBox {
        display: flex;
        align-items: center;
        .shopInfoItemImg {
          width: 50px;
          height: 50px;
          margin-right: 24px;
        }
      }
      .iconStyle {
      }
      .timestamp {
        color: #333;
      }
    }
  }
  .myModal {
    background: #fff;
  }
  // 规格弹窗
  .specModal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: visible;
    z-index: 999;
    background: rgba(0, 0, 0, 0.7);
    &.hideSpecModal {
      display: none;
    }
    &.showSpecModal {
      display: flex;
    }
  }
  .container {
    width: 600px;
    background: #ffffff;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    .specModalTitle {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      word-break: break-all;
      -webkit-line-clamp: 1;
      text-align: center;
      overflow: hidden;
      padding: 40px 80px 0 20px;
      margin-bottom: 40px;
      font-weight: 500;
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
    }
    .close {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 80px;
      position: absolute;
      right: 0;
      top: 0;
      font-size: 60px;
      font-weight: 300;
    }
    .propertySection {
      padding: 0 30px;
      .propertiesTitle {
        margin-bottom: 10px;
        text-indent: 10px;
      }
      .propertiesLabel {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-bottom: 20px;
        .value {
          background: #777777;
          padding: 10px 20px;
          border-radius: 15px;
          margin-right: 20px;
          margin-bottom: 15px;
          color: #ffffff;
          font-size: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
        }
        .active {
          background: orange;
        }
      }
    }
    .specSection {
      padding: 0 30px;
      .specTitle {
        margin-bottom: 10px;
        text-indent: 10px;
      }
      .specLabel {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-bottom: 20px;
        .value {
          background: #777777;
          padding: 10px 20px;
          border-radius: 15px;
          margin-right: 20px;
          margin-bottom: 15px;
          color: #ffffff;
          font-size: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
        }
        .active {
          background: orange;
        }
      }
    }
    .bottomBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 100px;
      background: #eeeeee;
      padding: 0 30px;
      box-sizing: border-box;
      .price {
        color: red;
      }
      .button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 20px;
        border-radius: 40px;
        background: orange;
        color: #ffffff;
      }
    }
  }
  // 购物车弹窗
  .cartLayoutContainer {
    .cartLayoutHeader {
      display: flex;
      justify-content: space-between;
      position: relative;
      height: 40px;
      padding-bottom: 20px;
      align-items: center;
      position: sticky;
      top: -8rpx;
      background: #ffffff;
      z-index: 1;
      &::after {
        content: '';
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        border-bottom: 1px solid #d6e4ef;
      }
      .closeBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 80px;
        font-size: 60px;
        font-weight: 300;
      }
      .clearBtn {
        color: orange;
      }
    }
    .cartList {
      .cartItem {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        // border-bottom: 2px solid #d6e4ef;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          top: auto;
          left: 0;
          right: 0;
          bottom: 0;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          border-bottom: 1px solid #d6e4ef;
        }
        .cartItemName {
          display: flex;
          align-items: center;
          padding-right: 10px;
          .name {
            margin-right: 10px;
          }
          .specs {
            color: #999999;
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
          }
          .price {
          }
        }
        .cartItemOperate {
          display: flex;
          align-items: center;
          .count {
            width: 76rpx;
            text-align: center;
          }
          .jian {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            line-height: 38px;
            color: orange;
            border-radius: 50%;
            background-color: #fff;
            font-size: 40px;
            font-family: PingFangSC-Regular, PingFang SC;
            border: 2px solid orange;
          }
          .add {
            display: flex;
            justify-content: center;
            width: 50px;
            height: 50px;
            line-height: 40px;
            color: #ffffff;
            border-radius: 50%;
            background-color: orange;
            font-size: 50px;
            font-family: PingFangSC-Regular, PingFang SC;
          }
        }
      }
    }
  }
  // 选择下单方式
  .slectOrderWay{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: visible;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
    &.hideModal {
      display: none;
    }
    &.showModal {
      display: flex;
    }
    .selectWay{
      width: 550px;
      // height: 400px;
      background: #ffffff;
      position: relative;
      border-radius: 15px;
      overflow: hidden;
      box-sizing: border-box;
      padding: 20px;
      .title{
        display: flex;
        align-items: center;
        .appIcon{
          width: 70px;
          height: 70px;
          border-radius: 50%;
          margin-right: 20px;
        }
      }
      .option{
        display: flex;
        align-items: center;
        margin-top: 40px;
        .selectBar{
          width: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          margin-right: 20px;
        }
        .selecttedIcon{
          width: 60px;
          height: 60px;
        }
        .notSelected{
          width: 50px;
          height: 50px;
          border: 2px solid #eee;
          border-radius: 50%;
        }
      }
      .confirmBtn{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 40px;
        margin-top: 30px;
        margin-bottom: 10px;
        .name{
          border: 2px solid #eee;
          border-radius: 12px;
          padding:  10px 30px;
        }
      }
    }
  }
}
